<!-- 写一个登录页 -->
<template>
	 <div >
		 <div class="form-login">
			<h1>登  录</h1>
			<el-form size="large">
				<el-form-item>
					<el-input v-model="username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="password" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="login">登录</el-button>
				</el-form-item>
				<p style="text-align: center;" v-if="errorMessage" class="error">{{ errorMessage }}</p>	
			</el-form>
		 </div>
	 </div>
</template>
<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			errorMessage: ''
		}
	},
	methods: {
		login() {
			// 登录逻辑
			if (this.username === 'admin' && this.password === '123456') {
				this.$router.push('/dashboard')
			} else {
				this.errorMessage = '用户名或密码错误'
			}			
			}
		}
}
</script>
<!-- 登录页样式 -->
<style lang="scss" scoped>
// 登录框居住样式
.form-login {
	width: 400px;
	margin: 20vh auto;
	padding: 100px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	h1 {
		text-align: center;
		margin-bottom: 20px;
	}
	.el-input {
		margin-bottom: 10px;
	}
	.el-button {
		width: 100%;
	}
	.error-message {
		color: red;
		text-align: center;
		margin-bottom: 10px;
	}
}

</style>